<!DOCTYPE html>
<html>

<head>
    <title>事件冒泡与捕获示例</title>
    <style>
        .outer {
            padding: 20px;
            background: #f0f0f0;
        }

        .middle {
            padding: 20px;
            background: #ccc;
        }

        .inner {
            padding: 20px;
            background: #999;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer" id="outer">
        outer
        <div class="middle" id="middle">
            middle
            <div class="inner" id="inner">
                inner (点击我)
            </div>
        </div>
    </div>

    <script>
        // 获取元素
        const outer = document.getElementById('outer');
        const middle = document.getElementById('middle');
        const inner = document.getElementById('inner');

        // 事件捕获示例 (第三个参数为true表示在捕获阶段触发)
        outer.addEventListener('click', () => {
            console.log('outer 捕获');
        }, true);

        middle.addEventListener('click', () => {
            console.log('middle 捕获');
        }, true);

        inner.addEventListener('click', () => {
            console.log('inner 捕获');
        }, true);

        // 事件冒泡示例 (第三个参数为false或省略，表示在冒泡阶段触发)
        outer.addEventListener('click', () => {
            console.log('outer 冒泡');
        }, false);

        middle.addEventListener('click', () => {
            console.log('middle 冒泡');
        }); // 默认为false

        inner.addEventListener('click', () => {
            console.log('inner 冒泡');
        });
    </script>
</body>

</html>